<template>
  <view
    class="flex"
    :class="[
      props.direction == 'row' ? 'flex-row' : 'flex-col',
      props.direction == 'customCol' ? '' : _align,
    ]"
    :style="{ flexWrap: props.direction == 'customCol' ? 'nowrap' : 'wrap' }"
  >
    <slot></slot>
  </view>
</template>
<script lang="ts" setup>
/**
 * 单选框组
 * @description 单选框组中，只能放置tm-radio组件，且必须配合tm-radio组件一起使用，不可单独使用。
 */
import {
  computed,
  nextTick,
  provide,
  ref,
  watch,
  getCurrentInstance,
  inject,
  toRaw,
  PropType,
} from "vue";
import { inputPushItem, rulesItem } from "./../tm-form-item/interface";
const emits = defineEmits(["update:modelValue", "change"]);
const proxy = getCurrentInstance()?.proxy ?? null;
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false,
  },
  defaultValue: {
    type: [String, Number, Boolean],
    default: "",
  },
  modelValue: {
    type: [String, Number, Boolean],
    default: "",
  },
  direction: {
    type: String as PropType<"row" | "col" | "customCol">,
    default: "row", //row横排，col为竖排。
  },
  align: {
    type: String as PropType<"left" | "center" | "right">,
    default: "left",
  },
  //模式
  /**
   * radio:正常的单选样式。
   * button:按钮单选模式
   */
  model: {
    type: String,
    default: "radio", // radio,button
  },
});
let _cacheBoxList: Array<string | number | boolean> = [];
const _mValue = ref(props.defaultValue || props.modelValue);
const _align = computed(() => {
  let list = {
    left: "flex-row-center-start",
    center: "flex-row-center-center",
    right: "flex-row-center-end",
  };
  let listCol = {
    left: "flex-col-center-start",
    center: "flex-col-center-center",
    right: "flex-col-center-end",
  };
  return props.direction == "row" ? list[props.align] : listCol[props.align];
});

//组件唯一标识。
const checkBoxkeyId = "tmRadioBoxGroup";
watch(
  () => props.modelValue,
  () => {
    _mValue.value = props.modelValue;
  },
  { deep: true }
);
function pushKey(key: string | number | boolean) {
  _cacheBoxList.push(key);
}
nextTick(() => {
  const _filter_key = _cacheBoxList.filter((el) => el == _mValue.value);
  if (_filter_key.length > 0) {
    _mValue.value = _filter_key[0];
  }
  emits("update:modelValue", _mValue.value);
});
//更新值、
function addKey(key: string | number | boolean) {
  _mValue.value = key;
  emits("update:modelValue", _mValue.value);
  // console.log(new Date().getSeconds(),'----3')

  nextTick(() => {
    emits("change", _mValue.value);
  });
}

provide(
  "tmRadioBoxDisabled",
  computed(() => props.disabled)
);
provide(
  "tmRadioBoxVal",_mValue
);
provide(
  "tmRadioBoxModel",
  computed(() => props.model == "radio")
);
provide("tmCheckedBoxDir", props.direction);
defineExpose({ pushKey: pushKey, addKey: addKey, checkBoxkeyId: checkBoxkeyId });
</script>
